<template>
  <div class="sec-top">
    <a href="#/new" class="btn btn-sm btn-primary">新增闪屏任务</a>
  </div>
  <div class="list">
    <table v-show="list.length > 0" class="table table-bordered table-hover">
      <caption>闪屏任务列表</caption>
      <thead>
        <tr>
          <th>任务名</th>
          <th class="col-nowrap">设备平台</th>
          <th>渠道</th>
          <th class="col-nowrap">生效开始时间</th>
          <th class="col-nowrap">生效结束时间</th>
          <th class="col-nowrap">时长（秒）</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="ad in list">
          <td>{{ad.name}}</td>
          <td class="col-nowrap">{{+ad.deviceType | platform}}</td>
          <td>{{ad.channel}}</td>
          <td class="col-nowrap">{{ad.startTime}}</td>
          <td class="col-nowrap">{{ad.endTime}}</td>
          <td>{{ad.waitTime}}</td>
          <td class="text-right col-nowrap">
            <a :href=" '#/' + ad.id " class="btn btn-sm btn-primary">查看详情</a>
            <button class="btn btn-sm btn-danger" @click="deleteAd(ad.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <vue-pages :pages.sync="pages" :get-list="getList"></vue-pages>
  </div>
</template>
<style src="./flash-ad-list.css" scoped></style>
<script src="./flash-ad-list.js"></script>